<template>
    <div class="todo_container">
        <div class="todo-items">
            <div class="todo-item" v-for="thing in todo_things" :key="thing.id">
                <el-checkbox @click="switch_todo_item(thing.id)" :="thing.checked">{{thing.title}}</el-checkbox>
            </div>
        </div>
        <el-input v-model="todo_input"  placeholder="请输入内容"></el-input>
        <el-button type="primary" @click=add_todo_item>添加todo事件</el-button>
        <h1>{{ localKey }}</h1>
        <h1>??</h1>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
const localKey = ref('wait ...')

const todo_things = ref([
    {
        id: 1,
        checked: false,
        title: '每天都要吃饭以补充能量',
    },
    {
        id: 2,
        checked: false,
        title: '享受美味的午餐时间',
    },
    {
        id: 3,
        checked: false,
        title: '吃一顿丰盛的晚餐',
    },
    {
        id: 4,
        checked: false,
        title: '与家人共享的美好晚餐时光',
    },
]);

const todo_input = ref('');

const sort_todo_items = () => {
    todo_things.value.sort((a, b) => {
        if (a.checked && !b.checked) {
            return 1;
        }
        return -1;
    });
};

const add_todo_item = () => {
    todo_things.value.push({
        id: todo_things.value.length + 1, // 生成唯一的id
        checked: false,
        title: todo_input.value,
    });
    todo_input.value = '';
    sort_todo_items();
};

const switch_todo_item = (index) => {
    todo_things.value.forEach((item) => {
        if (item.id === index) {
            item.checked = !item.checked; // 切换 checked 状态
        }
    });
    sort_todo_items();
};

// return {
//     todo_things,
//     todo_input,
//     add_todo_item,
//     switch_todo_item,
// };

onMounted(()=>{
    localKey.value = localStorage.getItem('localKey')
})
</script>

<style>
:root {
    font-size: large;
}

.todo_container {
    width: 500px;
    margin: auto;
}
</style>